import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7', shadowColor: '#235fa7' })
  const w = board.width
  const h = board.height
  const path1 = `M15 5 L ${w - 15} 5 Q ${w - 5} 5, ${w - 5} 15
  L ${w - 5} ${h - 15} Q ${w - 5} ${h - 5}, ${w - 15} ${h - 5}
  L 15, ${h - 5} Q 5 ${h - 5} 5 ${h - 15} L 5 15
  Q 5 5 15 5`
  board.add(new GraphBack.Path({ path: path1, fill: false }))
  const path2 = `M 20 5 L 15 5 Q 5 5 5 15 L 5 20`
  const transform = new GraphBack.Transform(
    new GraphBack.Path({ path: path2, fill: false, lineWidth: 3, shadowBlur: 10 })
  )
    .mirror('x', board.width / 2, 0)
    .mirror('y', 0, board.height / 2)
  board.add(transform)
  board.render()
}
